/*
* @Author: Rosen
* @Date:   2017-05-08 15:28:19
* @Last Modified by:   Rosen
* @Last Modified time: 2018-03-24 09:45:59
*/
var webpack             = require('webpack');
var ExtractTextPlugin   = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin   = require('html-webpack-plugin');


// 环境变量配置，dev / online
var WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法 
//会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。
var getHtmlConfig = function(name, title){
    return {
        //指定模板名称   
        template    : './src/view/' + name + '.html',
        filename    : 'view/' + name + '.html',
        favicon     : './favicon.ico',
        title       : title,

        // inject 有两个作用： 1、true或者body：所有JavaScript资源插入到body元素的底部
        //                    2、head: 所有JavaScript资源插入到head元素中
        inject      : true,
        //hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值 
        hash        : true,
        //chunks表示在这个template里面注入的js文件  并且同时将extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置
        chunks      : ['common', name]
    };
};
// webpack config
var config = {
    entry: {
        'common'            : ['./src/page/common/index.js'],
        'index'             : ['./src/page/index/index.js'],
        'list'              : ['./src/page/list/index.js'],
        'detail'            : ['./src/page/detail/index.js'],
        'cart'              : ['./src/page/cart/index.js'],
        'order-confirm'     : ['./src/page/order-confirm/index.js'],
        'order-list'        : ['./src/page/order-list/index.js'],
        'order-detail'      : ['./src/page/order-detail/index.js'],
        'payment'           : ['./src/page/payment/index.js'],
        'user-login'        : ['./src/page/user-login/index.js'],
        'user-register'     : ['./src/page/user-register/index.js'],
        'user-pass-reset'   : ['./src/page/user-pass-reset/index.js'],
        'user-center'       : ['./src/page/user-center/index.js'],
        'user-center-update': ['./src/page/user-center-update/index.js'],
        'user-pass-update'  : ['./src/page/user-pass-update/index.js'],
        'result'            : ['./src/page/result/index.js'],
        'about'             : ['./src/page/about/index.js'],
    },
    output: {
        path        : __dirname + '/dist/',
        ////s.happymmall.com/mmall-fe/dist/    此处如果是用devserver来代理的话就写 /dist/  如果是打包则写成__dirname + '/dist/'  但是还是有点问

        //本地写法
        //publicPath  : 'dev' === WEBPACK_ENV ? (__dirname + '/dist/'): '//s.happymmall.com/mall-fe/dist/',

        //线上写法
        publicPath  :'dev' === WEBPACK_ENV ? '//81.68.232.219:8164/mall-fe/dist/': '/dist/',

        filename    : 'js/[name].js'
    },
//     //window对象的jQuery属性.即window.jQuery = window.$
// 因为在引用了jQuery库之复后，会为window对象声明一个制jQuery的全局变量，这样就可以在任何地方调用了。所以，一般先判断是否含zd有jQuery对象。
    externals : {
        'jquery' : 'window.jQuery'
    },

    //一般loader写在module中   
    //loader 用来处理非js的东西  如果loader还处理不了  就使用plugins 
    //loader 作用：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。
    //loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
           { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
            {
                test: /\.string$/, 
                loader: 'html-loader',
                query : {
                    minimize : true,
                    removeAttributeQuotes : false
                }
            }
      
        ]
    },
    //resolve配置用来影响webpack模块解析规则。解析规则也可以称之为检索，索引规则。配置索引规则能够缩短webpack的解析时间，提升打包速度
    //其实就是用来配置项目中使用的别名  

    ////查找module的话从这里开始查找
    // root: 'E:/github/flux-example/src', //绝对路径

    // //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    // extensions: ['', '.js', '.json', '.scss'],

    
   //模块别名定义，方便后续直接引用别名，无须多写长长的地址
   //alias

    resolve : {
        alias : {
            node_modules    : __dirname + '/node_modules',
            util            : __dirname + '/src/util',
            page            : __dirname + '/src/page',
            service         : __dirname + '/src/service',
            image           : __dirname + '/src/image'
        }
    },

    // 如果loader还处理不了  就使用plugins 
    plugins: [
        // 独立通用模块到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename : 'js/base.js'
        }),
        // 把css单独打包到文件里  这里的name是和引入js的文件保持同名的  是和entry里面的name保持一致的 
        // 因为webpack本来是将css打包成js文件的  单独打包的话 name会使用js对应的名字  
        //
        new ExtractTextPlugin("css/[name].css"),
        // html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),

        //1.先生成index.js  2.再生成css/index.js
        new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表')),
        new HtmlWebpackPlugin(getHtmlConfig('detail', '商品详情')),
        new HtmlWebpackPlugin(getHtmlConfig('cart', '购物车')),
        new HtmlWebpackPlugin(getHtmlConfig('order-confirm', '订单确认')),
        new HtmlWebpackPlugin(getHtmlConfig('order-list', '订单列表')),
        new HtmlWebpackPlugin(getHtmlConfig('order-detail', '订单详情')),
        new HtmlWebpackPlugin(getHtmlConfig('payment', '订单支付')),
        new HtmlWebpackPlugin(getHtmlConfig('user-login', '用户登录')),
        new HtmlWebpackPlugin(getHtmlConfig('user-register', '用户注册')),
        new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密码')),
        new HtmlWebpackPlugin(getHtmlConfig('user-center', '个人中心')),
        new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改个人信息')),
        new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密码')),
        new HtmlWebpackPlugin(getHtmlConfig('result', '操作结果')),
        new HtmlWebpackPlugin(getHtmlConfig('about', '关于MMall')),
    ],
    devServer: {
        port: 8088,
        inline: true,
        proxy : {
            '**/*.do' : {
                target: 'http://test.happymmall.com',
                changeOrigin : true
            }
        }
    }

};


module.exports = config;